<template>
  <div class="wfull">
    <a-row>
      <a-col v-for="(obj,i) in list" :key="`condition${i}`" :span="8">
        <div class="wfull flx-s pd5">
          <div class="w120 tar">{{ obj.name }}：</div>
          <div class="flx-1">
            <ZgInput v-if="['text','tags'].includes(obj.compType)" v-model="param[obj.code]"></ZgInput>
            <ZgSelect v-if="['select','radio'].includes(obj.compType)" v-model="param[obj.code]" :options="obj.opts"></ZgSelect>
            <div class="flx-s" v-if="['int','double'].includes(obj.compType)" >
              <ZgNumber class="w80" v-model="param[obj.code]"></ZgNumber>
              <div class="mr10 ml10">至</div>
              <ZgNumber class="w80" v-model="param[obj.code]"></ZgNumber>
            </div>
            <div class="flx-s" v-if="['date','datetime'].includes(obj.compType)" >
              <ZgDateRangePicker v-model="param[obj.code]"></ZgDateRangePicker>
            </div>
            <ZgDictionary v-if="['dic'].includes(obj.compType)" v-model="param[obj.code]" :code="obj.dicCode"></ZgDictionary>
            <ZgSelect v-if="['swicth','checkbox'].includes(obj.compType)" v-model="param[obj.code]" :options="booleanOpts"></ZgSelect>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      booleanOpts: [{ 'value': 'true', 'label': '是' }, { 'value': 'false', 'label': '否' }],
      param: {
        c1: '',
        c2: '',
        c3: 0,
        c4: '',
        c5: [],
        c6: ''
      },
      list: [
        { name: '字段字段', code: 'c1', compType: 'text' }, // tags
        { name: '字段字段', code: 'c2', compType: 'select', opts: [{ 'value': '1', 'label': '西瓜' }, { 'value': '2', 'label': '苹果' }] }, // radio
        { name: '字段字段', code: 'c3', compType: 'int' }, // double
        { name: '字段字段', code: 'c4', compType: 'swicth' }, // checkbox
        { name: '字段字段', code: 'c6', compType: 'dic', dicCode: 'political' },
        { name: '字段字段', code: 'c5', compType: 'date' } // datetime
      ]
    }
  },
  mounted () {
  },
  methods: {
    reset () {
      this.param.name = ''
      this.param.test = ''
    },
    getParam () {
      return Object.assign({}, this.param)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
